{% extends "layout.html" %}

{% block title %}数据采集{% endblock %}

{% block css %}
<style>
    .demo-login-container {
        width: 320px;
        margin: 21px auto 0;
    }

    .demo-login-other .layui-icon {
        position: relative;
        display: inline-block;
        margin: 0 2px;
        top: 2px;
        font-size: 26px;
    }

    .layui-form-label {
        width: auto;
    }

    .html_v,
    .db {
        height: 500px;
        overflow-y: scroll;
    }

    .html_v img {
        width: 200px;
    }

    .schtml {
        height: 500px;
    }
</style>

{% endblock %}



{% block cardbody %}


<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label ">请选择欲采集的网站</label>
            <div class="layui-input-inline">
                <select name="modules" lay-verify="required" lay-search>
                    <option value="">采集网站</option>
                    {% for obj in list %}
                    <option value="{{obj.id}}" data-url="{{obj.url}}">{{obj.name}}</option>
                    {% endfor %}

                </select>
            </div>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn layui-bg-blue qwe" lay-on="get-vercode">打开采集页面</button>
        </div>
    </div>

    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label">采集ID</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="tel" name="phone" lay-verify="nid" autocomplete="off" lay-reqtext="请填写id" lay-affix="clear"
                    class="layui-input demo-phone">
            </div>

        </div>
    </div>


    <!-- <div class="layui-form-item">
        <label class="layui-form-label">请选择您的操作</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="将采集内容提交到海角社区" title="将采集内容提交到海角社区" checked>
            <input type="radio" name="sex" value="下载至本地" title="下载至本地">
        </div>
    </div> -->

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
        </div>
    </div>
</form>
<hr style="margin: 22px 0;">







{% endblock %}

{% block js %}
<script src="/static/PublicJs/zzz.js"></script>
<script src="/static/PublicJs/jquery-3.4.1.min.js"></script>
<script>
    function LoginText() {
        return `<form class="layui-form">
            <h2 style="font-weight: 400;margin: 10px 0;text-align: center;color:#69c;">請輸入登錄海角的賬號和密碼</h2>
    <div class="demo-login-container">
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名"
                    autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="password" value="" lay-verify="required" placeholder="密   码"
                    lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
            </div>
        </div>

        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
        </div>

    </div>
</form>`;
    }
    function ResText() {
        return `<h3>生成式html: 請在左邊的文本框裏面進行修改</h3>
<h5 style="color:red;">正在开发采集视频, 如果成功将会分布公告, 谢谢您的支持!</h5>
<div class="layui-row">
    <div class="layui-col-xs6">
        <div class="db ">
            <textarea name="schtml" placeholder="采集的文本將顯示在此處" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-col-xs6">
        <div class="html_v "></div>
    </div>

    <div class="layui-btn-container">
        <button type="button" class="layui-btn" lay-on="rerunhtml">重新刷新</button>
    </div>
</div>`;
    }
    var ab2b64 = function (t) {
        return new Promise(function (e) {
            const n = new Blob([t]);
            const r = new FileReader();
            r.onload = function (t) {
                const n = t.target.result;
                const r = n.substring(n.indexOf(",") + 1);
                e(r);
            };
            r.readAsDataURL(n);
        });
    };
    var is_cdnimg = function (path) {
        if (typeof (path) !== "string") {
            return false
        }
        if (path.indexOf("/xiao/") !== -1) {
            return true;
        }
        if (path.indexOf("/upload/upload/") !== -1) {
            return true;
        }
        return false;
    }

    // 解密函数
    var loadBackgroundImage = function (bgUrl, bgEle) {
        if (is_cdnimg(bgUrl)) {
            // axios({
            //     url: bgUrl,
            //     responseType: "arraybuffer"
            //     // xhrFields: { responseType: 'arraybuffer' }
            // }).then((res) => {
            //     ab2b64(res).then((base64str) => {
            //         let ary = bgUrl.split('.'), decryptStr = decryptImage(base64str);
            //         bgEle.style.backgroundImage = 'url("data:image/' + ary.pop() + ';base64,' + decryptStr + '")';
            //     });
            // })
            $.ajax(bgUrl, {
                xhrFields: { responseType: 'arraybuffer' }
            }).then((res) => {
                ab2b64(res).then((base64str) => {
                    let ary = bgUrl.split('.'), decryptStr = decryptImage(base64str);
                    bgEle.src = "data:image/" + ary.pop() + ';base64,' + decryptStr;
                });
            })
        } else {
            bgEle.style.backgroundImage = 'url("' + bgUrl + '")';
        }
    }

    function b(params) {
        let ac = document.querySelector(".html_v");
        let imgs = params.querySelectorAll("img");
        // 獲取鏈接 imgs[0].dataset.xkrkllgl
        ac.innerHTML = "";
        ac.appendChild(params);

        for (let i = 0; i < imgs.length; i++) {
            const elementUrl = imgs[i].dataset.xkrkllgl;
            // console.log(elementUrl, imgs[i]);
            loadBackgroundImage(elementUrl, imgs[i]);

        }
    }

    function a(params) {
        document.querySelector('.db textarea').value = params;

        // 將文本轉換成html元素
        const div = document.createElement("div");

        div.innerHTML = params;
        b(div);

    }

    layui.use(['form', 'laydate', 'util'], function () {
        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;
        var form = layui.form;
        var laydate = layui.laydate;
        // 自定义验证规则
        form.verify({
            nid: function (value, elem) {
                if (value == "" || value.length <= 0) {
                    return '请输入采集的id号';
                }
            }
        });

        form.on('submit(demo1)', function (data) {
            var field = data.field; // 获取表单字段值
            // 显示填写结果，仅作演示用
            // layer.alert(JSON.stringify(field), {
            //     title: '当前填写的字段值'
            // });
            // 此处可执行 Ajax 等操作
            // …
            var loadIndex = layer.msg('加载中', {
                icon: 16,
                shade: 0.5,
                title: "稍等一会...",
                content: "服务器正在进行操作",
                anim: 6,
                time: 0
            });

            axios({
                url: "/Shujucaiji/",
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                data: {
                    "nid": field.phone
                }
            }).then(res => {
                layer.open({
                    type: 1,
                    title:"<i class='iconfont icon-gonggao' style='margin-right:10px;color:red;'></i><span>如果您有兴趣想把本网站页面修改的更出色, 欢迎你添加微信: duyanbz 联系开发者!</span>",
                    offset: 't',
                    anim: 5, // 从上往下
                    area: ['100%', 'auto'],
                    shade: 0.7,
                    shadeClose: true,
                    id: 'ID-demo-layer-direction-t',
                    content: ResText()
                });
                a(res.data)
                layer.close(loadIndex);
            }).catch(error => {
                console.error("响应失败: ", error);
                layer.close(loadIndex);
            });
            return false; // 阻止默认 form 跳转
        });
        util.on('lay-on', {
            // 获取验证码
            "get-vercode": function (othis) {
                axios({
                    url: "/Shujucaiji/api/1/",
                    method: "GET",
                    params: {
                        "type": document.querySelector("select[name='modules']").value
                    }
                }).then(res => {
                    // console.log("返回結果: ", res.data);
                    layer.open({
                        type: 2,
                        title: 'yy采集, 如果對此頁面有建議可添加wx: duyanbz 提出',
                        shadeClose: true,
                        maxmin: true, //开启最大化最小化按钮
                        area: ['500px', '600px'],
                        content: res.data
                    });
                }).catch(error => {
                    console.error("返回失敗", res.response);
                })
            },
            "rerunhtml": function () {
                let text = document.querySelector('.db textarea').value;
                a(text)

            },
          
        });
       
    });


</script>


{% endblock %}